
/*************************************************************
*
* Estilos Genéricos
*
**/



body {
	font-family: Arial, Tahoma, sans-serif;
	font-size: 12px;
}


.fl {float: left;}  	/* clase genérica para flotar a la izquierda */
.fr {float: right;}	/* clase genérica para flotar a la derecha. Esto nos permite saber a simple vista en el html que le afecta y no tenemos que aplicarlo a cada elemento en el css */

/* HEAD DE PRUEBA */
#head {
	background: url("../img/headBackgroundAristo.png") scroll 0 0 repeat-x
		transparent;
	height: 94px;
}

#head span {
	font-family: Arial, Tahoma;
	float: left;
	margin-top: 15px;
	margin-left: 340px;
	color: white;
	font-weight: bold;
	font-size: 50px;
	text-shadow: 1px 1px 0 #444, 2px 2px 0 #444;
	/* CCC end of 2 level deep grey shadow */
	/*                3px 3px 0 #444,
                4px 4px 0 #444,
                5px 5px 0 #444,
                6px 6px 0 #444; end of 4 level deep dark shadow  */
	-webkit-transition: all 0.12s ease-out; /* Safari & Chrome */
	-moz-transition: all 0.12s ease-out; /* Firefox */
	-o-transition: all 0.12s ease-out; /* Opera */
}

#head span:hover { /* CSS3 Transform Effect */
	-webkit-transform: scale(1.2); /* Safari & Chrome */
	-moz-transform: scale(1.2); /* Firefox */
	-o-transform: scale(1.2); /* Opera */
}

li.ui-datalist-item {
	list-style: none;
	margin-left: -25px;
}

.title {
    margin-left: auto;
    margin-right: auto;
    color: white; 
    font-size: 20px; 
    text-shadow: black 0.1em 0.1em 0.2em
}
/*************************************************************
*
* Estilos Estructuras Básicas
*
**/

.contenedor960 {
	width: 960px;		/* útil para extender efectos fuera de los márgenes de 960, aplicando este estilo en otros más genéricos como cabecera y menu */
	margin: 0 auto;   	/* top y bottom a 0px y left y right lo establece el navegador */
	overflow: hidden; 	/* si sobresale algún elemento este se oculta */
        margin-bottom: 20px;
}

/*************************************************************
*
* Estilos Cabecera
*
**/

#cabecera {
	height: 131px;  
}

	#cabecera h1 {
		color: #e00d3b;
		font-size: 22px;
		margin-top: 30px;
	}

	#cabecera h2 {
		color: #999999;
		font-size: 16px;
		margin-top: 10px;
		margin-right: 50px;
	}
	
	#cabecera img{
		padding-left: 10px;
	}


.logo {
	margin-top: 29px;
}



/*************************************************************
*
* Estilos ZONA 3 COLUMNAS
* 
**/
	
#contenedor3Columnas {
	background: url('../img/fondo3Columnas.png') 0 0 no-repeat;
	height: 245px;
}

	#contenedor3Columnas h3 {
		color: #929292;
		font-size: 18px;
		margin-top: 10px;

	}
	
	#contenedor3Columnas p {
	    color: #919295; 
		clear: left;   /* con esto conseguimos que se muestre debajo de la imagen de adorno y no a su alrededor */
	}
	
	


.columnaIndividual_3col {
	width: 285px;
	margin: 35px 35px 0 0;
	float: left;
	text-align: justify; 
}
	
	.columnaIndividual_3col img {
		margin: 0 15px 15px 0;
	}
	
	.columnaIndividual_3col ul li{
		background: url('../img/adorno_Lista.png') center left no-repeat;
		color: #3797e7;
		padding: 3px 3px 3px 20px;
		margin-top: 15px;
	}
	
	.columnaIndividual_3col a {
		color: #1e80d2;
		text-decoration: none;
	}
	
	.columnaIndividual_3col a:hover {
		text-decoration: underline;
	}



	
	
	
	
/*************************************************************
*
* Estilos ZONA 2 COLUMNAS - Contenido 
* 
**/
	
	
#contenedor2Columnas {
	margin-top: 50px;
	text-align: justify;
}

	#contenedor2Columnas h3 {
		color: #1e80d2;
		font-size: 13px;
		text-transform: uppercase;
		word-spacing: 4px;
		letter-spacing: 2px;
		margin-bottom: 20px;		
	}
	
	#contenedor2Columnas p {
		color: #444549;
		margin-bottom: 10px;
	}	
	
	#contenedor2Columnas h4 {
		color:  #444549;
		font-size: 12px;
		font-weight: bold;
                margin-bottom: 10px;
		
	}
	
		#contenedor2Columnas h4 span {
			color: red;
		}



#columna_izq {
	width: 480px;
	/* border: 1px solid blue; */
}

	#columna_izq iframe {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	#columna_izq a {
		font-size: 13px;
		text-decoration: none;
		color: red;
	}
		
	#columna_izq a:hover {
		text-decoration: underline;
	}	
	
	


#columna_dcha {
	width: 360px;
	/* border: 1px solid red; */
	margin-bottom: 100px;
}	
        
	#columna_dcha ul li {
		border-bottom: 1px solid #e1e4e8;
	}
	
	
		#columna_dcha ul li span {
			color: #919295;
			display: block;
			margin-bottom: 20px;
			margin-top: 20px;		
		}

		
		#columna_dcha ul li p {
			margin-bottom: 20px;
		}
	

	
	
	
	
	
/*************************************************************
*
* Estilos PIE de Página
* 
**/
	

#pie {
	background: url("../img/footBackgroundAristo.jpg") scroll 0 0 repeat-x
		transparent;
	height: 150px;
}

	#pie h3 {
		color: #ff6992;
		font-size: 13px;
		text-transform: uppercase;
		word-spacing: 4px;
		letter-spacing: 2px;
		margin-bottom: 5px;
	}
	
	#pie p {
		color:#aaaaaa;
		text-align: justify;
	}
	
	#pie ul li {
		padding: 5px 15px;
	}
	
	
	#pie a {
		color:lightgrey;
		text-decoration: none;

		
	}
	
		#pie a:hover {
			color: #88bfed;
		}
		
#pie_col_Izquierda {
	width: 335px;
	margin-right: 145px;
}

#pie_col_Izquierda img {
	margin-top: 15px;
	margin-right: 5px;
}

#pie_col_Izquierda p {
    margin-bottom: 15px;
}

#pie_col_Centro {
    margin-right: 100px;
    width: 200px;
}


#pie_col_Derecha{
	width: 131px;
        text-align: center;

}

    #pie_col_Derecha p{
        margin-bottom: 15px;
        text-align: center;
    }


#copyright {
	height: 40px;
	text-align: center;
	color: #aaaaaa;
	padding-top: 28px;
}
